<template>
  <div class="commitment-page">
    <el-dialog
      v-model="dialogVisible"
      title="评审专家保密承诺书"
      width="800px"
      :show-close="false"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
    >
      <div v-for="(item, index) in textList" :key="item.id" class="text-box">
        {{ item.text }}
        <span class="str-box" v-if="index === 1">{{ text }}</span>
      </div>
      <template #footer>
        <div class="dialog-footer">
          <el-button :type="count > 0 ? 'info' : 'primary'" @click="handleAgree" :disabled="count > 0">
            我同意全部条款<sapn v-if="count > 0">({{count}})</sapn>
          </el-button>
          <el-button @click="handleBack">取消</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import { defineEmits, onMounted, onUnmounted, ref } from 'vue';
import { getAgree } from "/@/api/project";

const text = '点击同意按钮即代表您已阅读并理解以下全部条款，且同意遵守：'

const textList = [
  {id:1, text: '尊敬的评审专家：'},
  {id:2, text: '鉴于您在项目评审工作中将可能接触或掌握我司的保密信息，为确保有关保密信息的机密性及特定用途，保障研发项目安全，特向您提供《评审专家保密承诺书》（后简称“承诺书”）如下。请您在参与我们的研发项目之前，仔细阅读并签署此承诺书，'},
  {id:3, text: '1、我同意并承诺，对参与项目过程中接触到的项目资料、技术方案、商业计划等全部信息(统称“保密信息”)负有保密义务，在无明文许可的情况下，不会披露、使用、复制、修改、或改造全部或其中任何部分。'},
  {id:4, text: '2、我同意并承诺，仅将保密信息用于特定用途，不得为其它目的使用保密信息。'},
  {id:5, text: '3、我同意并承诺，将采取一切必要的措施，确保项目资料的机密性，包括但不限于：不向任何未经授权的第三方直接或间接披露、允许、协助其使用属于保密信息的全部或者部分内容；不在未经授权的场合下讨论项目细节；不将项目资料存储在不安全的设备或网络中。'},
  {id:6, text: '4、我同意并承诺，如发现保密信息被其他第三方取得，将立即通知【华润雪花啤酒（中国）有限公司】。'},
  {id:7, text: '5、保密期限：我同意在项目评审结束后或退出项目后，继续履行保密义务，直至【华润雪花啤酒（中国）有限公司】书面解除保密协议为止。'},
  {id:8, text: '6、如有违反此承诺书的行为发生，我愿赔偿由此给【华润雪花啤酒（中国）有限公司】及其关联公司或合作方带来的所有损失，包括直接损失和间接损失，并承担一切法律后果。'},
  {id:8, text: '7、内部专家特别承诺：我将严格遵守公司保密及信息安全管理相关制度要求，确保所接触和管理的涉密信息安全。离岗时，自愿接受脱密期管理。离岗后，对所知悉涉密信息仍负有保密义务。如违反上述承诺，自愿承担公司行政处分和法律后果。'},
]

const props = defineProps({
  // 弹窗是否显示
  isCommitment: {
    type: Boolean,
    default: () => false
  },
  // 详情信息
  projectInfo: {
    type: Object,
    default: () => {}
  }
})

// 弹窗是否显示
const dialogVisible = ref<boolean>(false)

// 倒计时
const count = ref<number>(3)

// 定时器
const timer = ref<any>(null)

onMounted(() => {
  dialogVisible.value = !props.isCommitment
  changeCount()
})

// 倒计时改变
const changeCount = () => {
  timer.value = setInterval(() => {
    if(count.value > 0) {
      count.value--
    }
  }, 1000);
}

onUnmounted(()=> {
  // 卸载定时器
  clearInterval(timer.value)
  timer.value = null
})

// 关闭承诺书弹窗事件
const emit = defineEmits(["changeIsCommitment", "back"]);

const handleClose = () => {
  emit("changeIsCommitment", true);
}

const handleBack = () => {
  emit("back");
}

// 同意承诺书
const handleAgree = async () => {
  let expertIds = []
  if(props.projectInfo.rvwUserList) {
    expertIds = props.projectInfo.rvwUserList.map(item => item.expertId)
  }
  const params = {
    projectManageId: Number(props.projectInfo.projectManageId),
    expertRvwId: props.projectInfo.id,
    expertIds
  }
  const { code, data } = await getAgree(params)
  if(code === 200) {
    handleClose()
  }
}
</script>
<style scoped lang="scss">
.commitment-page {
  :deep .el-dialog__header {
    text-align: center;
    font-weight: bold;
    .el-dialog__title {
      font-size: 24px;
    }
  }

  .text-box {
    line-height: 24px;
    margin-bottom: 20px;
    font-size: 16px;
  }

  .str-box {
    font-weight: bold;
  }

  .dialog-footer {
    text-align: center;
  }
}
</style>